import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Card, Button } from 'antd-mobile'
import {  Popover } from 'antd-mobile'
import { DotLoading } from 'antd-mobile'
import {
    AntOutline,
    HandPayCircleOutline,
    ScanningOutline,
    TransportQRcodeOutline,
  } from 'antd-mobile-icons'
function Indexx() {
    // 订单
    let nav=useNavigate()
    const actions = [
        { key: 'scan', icon: <ScanningOutline />, text: '支付宝' },
        { key: 'payment', icon: <HandPayCircleOutline />, text: '微信' },
        { key: 'bus', icon: <TransportQRcodeOutline />, text: '银行卡' },
        
      ]
  return (
    <div style={{backgroundColor:'#f2f2f2'}}>
       <NavBar onBack={()=>nav(-1)} style={{backgroundColor:'gray'}}>订单详情</NavBar>
       {/* 下单的时候， 出现占座的读取loading和占座中进度条的展示 */}
        <p>占座中<DotLoading /></p>
       <br />
       <div style={{backgroundColor:'#ffff'}}>
       <p style={{display:'flex'}}>
                <h2>06:10</h2> &emsp;  &emsp;<span style={{marginTop:'15px'}}> 5时59分</span>&emsp;  &emsp; <h2>12:09</h2>
                </p>
            <p style={{display:'flex'}}> <h4>北京南</h4>&emsp;  &emsp; <span style={{marginTop:'15px'}}>G101</span>&emsp;  &emsp; <h4>上海虹桥</h4></p>
       </div>
       
       <div style={{backgroundColor:'#ffff',margin:'10px',height:'100px'}}>
        
       {/* 占座状态需同步在乘车人列表 */}
        <Card  style={{backgroundColor:'#f2f2f2f2',margin:'10px'}} onClick={()=>nav('/sit')}>
        姓名：张三，
            身份证号:12345678910,
            手机号:1314567889
            <Button>成人</Button>
        </Card>
       
       
       </div>
      
       <div style={{marginTop:'270px',backgroundColor:'white',width:'100%'}}>
          
       <Popover.Menu
          mode='dark'
          actions={actions}
          placement='right-start'
          onAction={node => Toast.show(`选择了 ${node.text}`)}
          trigger='click'
        >
          <Button style={{backgroundColor:'gray',width:'400px'}}
          >支付</Button>
        </Popover.Menu>
        <Button onClick={()=>nav('/fu')}>1</Button>
       </div>
     
    </div>
  )
}

export default Indexx
